<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="/bootstraptable/bootstrap-table.min.css" rel="stylesheet">
    <style>
        .text_bottom_border {
            border: none;
            border-bottom: 1px solid black;
        }

        .text_no_border {
            border: none;
        }
    </style>
</head>
<body>
<div class="container">
    <div style="width: 1200px;margin: 0 auto;">
        <h5 style="color: #3e79b6">您正在做的业务是：产品设计--产品物料组成设计--制定物料组成设计单</h5>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" style="text-align: right">
            <button type="button" id="add_btn" class="btn btn-default">添加物料</button>
            <button type="button" id="remove_btn" class="btn btn-default">删除物料</button>
            <button type="button" id="preview_btn" class="btn btn-default">预览</button>
            <button type="button" id="submit_btn" class="btn btn-default" >确定</button>
            <button type="button" class="btn btn-default"><a href="javascript:history.back()"
                                                             style="color: black">返回</a></button>
        </div>
        <form id="module_form" class="form-horizontal">

            <div class="panel-body">
                <div class="form-group">
                    <div class="col-sm-6">
                        <label class="col-sm-4 control-label">产品名称：</label>
                        <div class="col-sm-8">
                            <input type="text" name="productName" id="productName"
                                   class="form-control text_no_border">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <label class="col-sm-4 control-label">产品编号：</label>
                        <div class="col-sm-8">
                            <input type="text" name="productId" id="productId"
                                   class="form-control text_no_border">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-6">
                        <label class="col-sm-4 control-label">设计人：</label>
                        <div class="col-sm-8">
                            <input type="text" name="designer" id="designer"
                                   class="form-control text_bottom_border"
                                   value="">
                        </div>
                    </div>
                </div>
                <!--物料明细表格-->
                <table class="table table-bordered table-striped" data-toggle="table" id="module_details_table">
                    <thead>
                    <tr>
                        <th data-field="a" data-formatter="formatChk">点选</th>
                        <th data-field="productId">物料编号</th>
                        <th data-field="productName">物料名称</th>
                        <th data-field="type" data-formatter="formatType">用途类型</th>
                        <th data-field="productDescribe">描述</th>
                        <th data-field="amount" data-formatter="formatText">数量</th>
                        <th data-field="amountUnit">单位</th>
                        <th data-field="costPrice">计划成本单价（元）</th>
                        <th data-field="c">小计（元）</th>
                    </tr>
                    </thead>
                </table>

                <div class="form-group">
                    <div class="col-sm-6">
                        <label class="col-sm-4 control-label">登记人：</label>
                        <div class="col-sm-8">
                            <input type="text" name="register" id="register"
                                   class="form-control text_bottom_border"
                                   value="">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <label class="col-sm-4 control-label">登记时间：</label>
                        <div class="col-sm-8">
                            <input type="text" name="registerTime" id="registerTime" class="form-control"
                                   value="">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-6">
                        <label class="col-sm-4 control-label">设计要求：</label>
                        <div class="col-sm-8">
                            <textarea class="form-control" id="moduleDescribe" name="moduleDescribe"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <!--显示添加物料的模态框，查询所有的物料信息-->
    <div class="modal fade" id="module_modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span>×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!--查询条件面板-->
                    <div id="module_file_search_div" class="panel panel-default">
                        <div class="panel-heading">
                            <h3>查询条件</h3>
                        </div>
                        <div class="panel panel-body">
                            <form class="">
                                <div class="form-group">
                                    <label>请选择I级分类</label>
                                    <select class="form-control" id="search_firstKindId" name="search_firstKindId">
                                        <option value="">--请选择--</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>请选择II级分类</label>
                                    <select class="form-control" id="search_secondKindId" name="search_secondKindId">
                                        <option value="">--请选择--</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>请选择III级分类</label>
                                    <select class="form-control" id="search_thirdKindId" name="search_thirdKindId">
                                        <option value="">--请选择--</option>
                                    </select>
                                </div>
                            </form>
                        </div>
                        <div class="panel-footer">
                            <button type="button" id="search_btn" class="btn btn-default">查询</button>
                        </div>
                    </div>
                    <!--查询数据表格-->
                    <table id="module_file_list_table"></table>
                </div>
                <div class="modal-footer">3</div>
            </div>
        </div>
    </div>
</div>
<!-- 全局js -->
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="/js/plugins/layer/layer.min.js"></script>

<!-- 自定义js -->
<script src="/js/hAdmin.js?v=4.1.0"></script>
<!--<script type="text/javascript" src="/js/index.js"></script>-->

<!-- 第三方插件 -->
<script src="/js/plugins/pace/pace.min.js"></script>

<!--BootstrapTable-->
<script src="/bootstraptable/bootstrap-table.min.js"></script>
<script src="/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>
<script>
    $(function () {
        aa()
        bb()
        cc()
        $("#registerTime").val(fortime1())
        $("#submit_btn").hide()
        let item = localStorage.getItem("id1");
        $.post("/design/file", {"id": item}, function (res) {
            if (res != null) {
                $("#productId").val(res.productId)
                $("#productName").val(res.productName)
            } else {
                alert("失败")
            }
        })

        // 为"添加物料"按钮绑定点击事件，弹出模态框
        $("#add_btn").click(function () {
            // 弹出模态框
            $("#module_modal").modal("show")

            // 初始化dom刷新表格
            $("#module_file_list_table").bootstrapTable({
                // 请求方式
                method: "post",
                // 内容类型：如果请求方式是post，内容类型必须是application/x-www-form-urlencoded
                contentType: "application/x-www-form-urlencoded",
                // 请求路径
                url: '/design/file/moduleFileList',
                // 数据行交替样式
                striped: true,
                // 是否是服务器端分页：server表示服务器端，client表示前端分页
                sidePagination: 'server',
                //初始化加载第一页
                pageNumber: 1,
                //是否分页
                pagination: true,
                // 单页记录数，页大小
                pageSize: 2,
                // 分页列表
                pageList: [2, 5, 10, 20],
                //刷新按钮
                // showRefresh:true,
                // 请求参数
                queryParams: function (params) {
                    let obj = {
                        // params.limit获取组件中的页大小
                        // params.offset获取请求数据的起始索引
                        pageSize: params.limit,
                        pageNo: (params.offset / params.limit) + 1,

                        // 查询表单的数据
                        search_firstKindId: $("#module_file_search_div #search_firstKindId").val(),
                        search_secondKindId: $("#module_file_search_div #search_secondKindId").val(),
                        search_thirdKindId: $("#module_file_search_div #search_thirdKindId").val(),
                    }
                    return obj;
                },
                // 表格列标题
                columns: [{
                    title: "物料编号",
                    field: "productId",
                    formatter: function (value, row, index) {
                        let html = `<a href="#">${value}</a>`
                        return html
                    }
                }, {
                    title: "物料名称",
                    field: "productName"
                }, {
                    title: "用途类型",
                    field: "type",
                    formatter: function (value, row, index) {
                        if (row.type === "Y001-1")
                            return "商品"
                        else
                            return "物料"
                    }
                }, {
                    title: "物料描述",
                    field: "productDescribe"
                }, {
                    title: "单位",
                    field: "amountUnit"
                }, {
                    title: "计划成本单价",
                    field: "costPrice"
                }, {
                    title: "添加",
                    field: "",
                    formatter: function (value, row, index) {

                        // js对象转化成json字符串
                        let json = JSON.stringify(row)

                        console.log(json)

                        let html = "<a href='javascript:addModuleDetails(" + json + ")'>添加</a>"
                        return html
                    }

                }]
            })
            // 点击查询按钮刷新表格
            $("#module_file_search_div #search_btn").click(function () {
                $("#module_file_list_table").bootstrapTable("refresh")
            })

        })

        $("#module_form #remove_btn").click(function() {
            let chks_checked = $("#module_form #module_details_table :checkbox[name='detailsNumber']:checked")


            if (chks_checked.length == 0) {
                alert("请选中要删除的物料明细")
                return
            }
            let chks = $("#module_form #module_details_table :checkbox[name='detailsNumber']")
            let data = $("#module_form #module_details_table").bootstrapTable("getData")

            for (let i = chks.length - 1; i >= 0; i--) {
                if (chks[i].checked) {
                    data.splice(i, 1)
                    $(chks[i]).parent("td").parent().remove()
                }
            }
        })

        // 为"预览"按钮绑定点击事件
        $("#preview_btn").click(function () {
            $("#submit_btn").show()
            $("#add_btn").hide()
            $("#remove_btn").hide()
            $("#preview_btn").hide()
            // 获取所有的数据行对象
            let data = $("#module_form #module_details_table").bootstrapTable("getData")

            // 获取所有的数量文本框
            let amounts = $("#module_form #module_details_table input[name='amount']")

            // 获取所有的点选的复选框对象
            let chks = $("#module_form #module_details_table :checkbox[name='detailsNumber']")

            for (let i=0; i<data.length; i++) {
                // 计算明细小计
                data[i].subtotal = data[i].costPrice * data[i].amount
                // 更新小计单元格
                $(chks[i]).parent("td").siblings(":last").html(data[i].subtotal)

                // 更新点选复选框所在的单元格
                $(chks[i]).parent("td").html((i+1))
                // 更新数量文本框所在的单元格
                $(amounts[i]).parent("td").html($(amounts[i]).val())
            }

        })
        // 为"确定"按钮绑定点击事件
        $("#submit_btn").click(function () {
            // 物料明细表格数据  格式：[{},{},...]
          let module_details=  $("#module_form #module_details_table").bootstrapTable("getData")

            let module_dto=
                {
                    "productId":$("#module_form #productId").val(),
                    "productName":$("#module_form #productName").val(),
                    "designer":$("#module_form #designer").val(),
                    "register":$("#module_form #register").val(),
                    "registerTime":$("#module_form #registerTime").val(),
                    "moduleDescribe":$("#module_form #moduleDescribe").val()
                }
            module_dto.details  =module_details
                //利用原生的ajax方式发送一步请求
            $.ajax({
                url:"/design/module/add",
                type:"post",
                data:JSON.stringify(module_dto),
                contentType:"application/json",
                success:function (data){
                    location.href="/design/succeed"
                    //location.reload()
                }
            })
        })

    })


    function fortime1() {
        let date = new Date();
        let y = date.getFullYear();
        let m = date.getMonth() + 1;
        let d = date.getDate();
        let h = date.getHours();
        let mm = date.getMinutes();
        let s = date.getSeconds();
        return (y + '-' + add(m) + '-' + add(d) + ' ' + add(h) + ':' + add(mm) + ':' + add(s));
    }

        function add(m) {
            return m < 10 ? '0' + m : m
        }

        function fortime(par) {
            let date = new Date(par);
            let y = date.getFullYear();
            let m = date.getMonth() + 1;
            let d = date.getDate();
            let h = date.getHours();
            let mm = date.getMinutes();
            let s = date.getSeconds();
            return (y + '-' + add(m) + '-' + add(d) + ' ' + add(h) + ':' + add(mm) + ':' + add(s));
        }

        // 添加物料明细
        function addModuleDetails(module) {
            console.log('aaa', module)

            // 获取物料明细表格的所有数据
            let data = $("#module_form #module_details_table").bootstrapTable("getData")

            // 标志位
            let index = -1
            for (let i = 0; i < data.length; i++) {
                if (module.productId === data[i].productId) {
                    index = i
                    break
                }
            }
            if (index === -1) {
                // 设置添加对象的数量属性
                module.amount = 1
                // 向物料明细表格中添加一行
                $("#module_form #module_details_table").bootstrapTable('append', module)

            } else {
                // 获取所有的数量文本框
                let amounts = $("#module_form #module_details_table input[name='amount']")
                // 文本框数量 + 1
                let count = parseInt($(amounts[index]).val())
                count++
                $(amounts[index]).val(count)
                // 修改对应对象的amount属性
                data[index].amount = count
                console.log("amount" + data[index].amount)
            }
        }

        // 格式化"用途类型"单元格
        function formatType(value, row, index) {
            return row.type == 'Y001-1' ? '商品' : '物料'
        }

        // 格式化"点选"单元格
        function formatChk(value, row, index) {
            return "<input type='checkbox' name='detailsNumber'>"
        }

        // 格式化"数量"文本框
        function formatText(value, row, index) {
            return `<input type='text' class='form-control' name='amount' value='${row.amount}'
                    onblur="changeAmount(this)">`
        }

        // "数量"文本框失去焦点的事件
        function changeAmount(param) {
            // 文本框的数量
            let val = $(param).val()
            // 获取文本框所在的行索引
            let index = $(param).parent("td").parent().index()

            // 获取物料明细表格的所有数据
            let data = $("#module_form #module_details_table").bootstrapTable("getData")
            // 修改对应对象的amount
            data[index].amount = parseInt(val)
        }


    function aa() {
        $.post("/DesignConflgFileKind/List", {"num": "1"}, function (res) {
            console.log(res)
            $("#design_module_unmake_list_form #search_firstKindId option:gt(0)").remove()
            for (let i = 0; i < res.length; i++) {
                let ary_object = res[i]
                let $option = $("<option>" + ary_object.kindName + "</option>")
                $option.val(ary_object.kindId)
                $("#search_firstKindId").append($option)
            }
        })
    }

    function bb() {
        $.post("/DesignConflgFileKind/List", {"num": "2"}, function (res) {
            console.log(res)
            $("#design_module_unmake_list_form #search_secondKindId option:gt(0)").remove()
            for (let i = 0; i < res.length; i++) {
                let ary_object = res[i]
                let $option = $("<option>" + ary_object.kindName + "</option>")
                $option.val(ary_object.kindId)
                $("#search_secondKindId").append($option)
            }
        })
    }

    function cc() {
        $.post("/DesignConflgFileKind/List", {"num": "3"}, function (res) {
            console.log(res)
            $("#design_module_unmake_list_form #search_thirdKindId option:gt(0)").remove()
            for (let i = 0; i < res.length; i++) {
                let ary_object = res[i]
                let $option = $("<option>" + ary_object.kindName + "</option>")
                $option.val(ary_object.kindId)
                $("#search_thirdKindId").append($option)
            }
        })
    }

</script>

</body>

</html>